<template>
    <div>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="singleTable" header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column label="开始时间" align="center">
                    <template #default="scope">
                        <el-time-select v-model="scope.row.startTime" disabled>
                        </el-time-select>
                    </template>
                </el-table-column>
                <el-table-column label="次数" align="center">
                    <template #default="scope">
                        <el-input-number :disabled="true" v-model="scope.row.cycleNumber" :min="1" :max="10" />
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)">修改
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                                   @click="remove(scope.row.id)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination background layout="total" :total=tableData.length></el-pagination>
            </div>
        </div>

        <!-- 编辑弹框 -->
        <el-dialog title="修改定时广播参数" v-model="editVisible" width="25em">
            <el-form label-width="25%">
                <el-form-item label="标题">
                    <el-tag>{{ editForm.title }}</el-tag>
                </el-form-item>
                <el-form-item label="开始时间">
                    <template #default="scope">
                        <el-time-select
                          v-model="editForm.startTime"
                          :clearable="false"
                          start="8:00" step="00:01" end="23:00"
                        >
                        </el-time-select>
                    </template>
                </el-form-item>
                 <el-form-item label="次数">
                    <template #default="scope">
                        <el-input-number v-model="editForm.cycleNumber" :min="1" :max="10" />
                    </template>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false" size="small">取消</el-button>
                    <el-button type="primary" @click="save(editForm)" size="small">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {
    ref,
    reactive
} from "vue";
import {
    ElMessage,
    ElMessageBox
} from "element-plus";
import {
    addVoice,
    getBroadcastList,
    removeBroadcast,
    updateBroadcast, upload
} from "../api/broadcast";
import {getDateTime} from "../utils/time";

export default {

    //注入刷新函数
    inject: ['reload'],

    name: "broadcastList",
    setup() {
        //初始化窗口状态
        const editVisible = ref(false);

        //初始化表格数据
        const tableData = ref([]);

        //初始化弹窗表单内容
        let editForm = reactive({
            id: "",
            title: "",
            startTime: "",
            cycleNumber: 1,
        });

        //这里定义好，后面刷新时要调用
        const getData = () => {
            getBroadcastList().then((res) => {
                tableData.value = res.data;
            });
        };

        //获取表格数据
        getData();

        //打开编辑弹窗
        const edit = (row) => {
            Object.keys(editForm).forEach((item) => {
                editForm[item] = row[item];
            });
            editVisible.value = true;
        };

        //定义保存操作
        const save = (form) => {
            editVisible.value = false;
            updateBroadcast(form)
              .then((res) => {
                  if (res.data === true) {
                      ElMessage.success('修改成功');
                      //重新加载实现刷新页面效果
                      getData();
                  } else {
                      ElMessage.error('修改失败，请稍后重试！');
                  }
              })
              .catch(() => {
                  ElMessage.error('服务器未启动或其它错误！');
              })
            //刷新页面（无效果）
            //this.reload();
        };

        //定义删除操作
        const remove = (id) => {
            ElMessageBox.confirm(
              "确定要删除这条定时广播吗？", "提示", {
                  type: "warning",
              })
              .then(() => {
                  //向服务器发送删除请求
                  removeBroadcast(id)
                    .then(res => {
                        if (res.data === true) {
                            ElMessage.success("删除成功");
                            //刷新表格数据
                            getData();
                        } else {
                            ElMessage.error("删除失败，请稍后再试！");
                        }
                    })
                    .catch(() => {
                        ElMessage.error('服务器未启动或其它错误！');
                    })
                  //刷新页面
                  //this.reload();
              })
              .catch(() => {
              });
        };


        return {
            tableData,
            editVisible,
            editForm,
            remove,
            edit,
            save,
        };
    },
};
</script>

<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}
</style>